<template>
	<el-dialog :title="form.id ? '编辑' : '新增'" :visible.sync="visible" :close-on-click-modal="false">
		<el-form ref="form" :model="form" :rules="rules">
			<el-form-item label="字段标题" :label-width="formLabelWidth" prop="colTitle">
				<el-input v-model="form.colTitle" autocomplete="off" placeholder="请输入字段标题"></el-input>
			</el-form-item>
			<el-form-item label="字段名" :label-width="formLabelWidth" prop="colName">
				<el-input v-model="form.colName" autocomplete="off" placeholder="请输入字段名"></el-input>
			</el-form-item>
			<el-form-item label="属性名" :label-width="formLabelWidth" prop="propName">
				<el-input v-model="form.propName" autocomplete="off" placeholder="请输入属性名"></el-input>
			</el-form-item>

			<el-form-item label="数据类型" :label-width="formLabelWidth" prop="colType">
				<el-select v-model="form.colType" clearable placeholder="请选择数据类型">
					<el-option v-for="item in FieldTypeList" :key="item.name" :label="item.desc" :value="item.name"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="表单类型" :label-width="formLabelWidth" prop="formType">
				<fortress-select
					v-model="form.formType"
					:dictList="ViewFormTypeList"
					placeholder="请选择表单类型"
					clearable
				></fortress-select>
			</el-form-item>
			<el-form-item label="数据集类型" :label-width="formLabelWidth" prop="dataType">
				<fortress-select
					v-model="form.dataType"
					:dictList="dataTypeList"
					placeholder="请选择数据集类型"
					clearable
				></fortress-select>
			</el-form-item>

			<el-form-item v-if="form.dataType" label="数据集配置" :label-width="formLabelWidth" prop="dataConfig">
				<template v-if="form.dataType == 1">
					<fortress-select v-model="form.dataConfig.dict" :dictList="dictList" placeholder="请选择" clearable></fortress-select>
				</template>
				<template v-if="form.dataType == 2">
					<el-input v-model="form.dataConfig.enumObj.enumName" autocomplete="off" placeholder="请输入枚举名"></el-input>
					<el-input v-model="form.dataConfig.enumObj.moduleName" autocomplete="off" placeholder="请输入模块名"></el-input>
				</template>
				<template v-if="form.dataType == 3">
					<el-input v-model="form.dataConfig.urlObj.url" autocomplete="off" placeholder="请输入URL地址"></el-input>
					<el-input v-model="form.dataConfig.urlObj.code" autocomplete="off" placeholder="请输入CODE字段"></el-input>
					<el-input v-model="form.dataConfig.urlObj.name" autocomplete="off" placeholder="请输入NAME字段"></el-input>
				</template>
				<template v-if="form.dataType == 4">
					<el-input v-model="form.dataConfig.jsonObj" autocomplete="off" placeholder="请输入JSON格式" clearable></el-input>
				</template>
			</el-form-item>
			<el-form-item label="是否必填" :label-width="formLabelWidth" prop="formType">
				<fortress-radio-group v-model="form.isRequired" :dictList="isRequiredList"></fortress-radio-group>
			</el-form-item>
			<el-form-item label="表单校验类型" :label-width="formLabelWidth" prop="formType">
				<fortress-select
					v-model="form.verifyTypeCode"
					:dictList="verifyTypeCodeList"
					placeholder="请选择表单校验类型"
					clearable
				></fortress-select>
			</el-form-item>
			<el-form-item label="排序字段" :label-width="formLabelWidth" prop="sort">
				<el-input-number :min="1" v-model="form.sort"></el-input-number>
			</el-form-item>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button @click="visible = false" size="medium" type="danger">取 消</el-button>
			<el-button type="primary" size="medium" @click="submitForm('form')">确 定</el-button>
		</div>
	</el-dialog>
</template>
<script>
import {
	memberextendfieldconfigInfo,
	memberextendfieldconfigSave,
	memberextendfieldconfigEdit,
} from "@/api/member/memberextendfieldconfig.js"
import { sysDictList } from "@/api/system/sysdict.js"
import { enumList } from "@/api/public.api.js"
import * as ftVal from "@/common/fortressValidator.js"

export default {
	data() {
		return {
			visible: false,
			form: {
				colTitle: "",
				colName: "",
				propName: "",
				colType: "",
				formType: "",
				dataType: "",
				sort: 1,
				isRequired: "2",
				verifyTypeCode: null,
				verifyTypeName: "",
				dataConfig: {
					dict: "",
					enumObj: {
						enumName: "",
						moduleName: "",
					},
					urlObj: {
						url: "",
						code: "",
						name: "",
					},
					jsonObj: "",
				},
			},
			formLabelWidth: "160px",
			rules: {
				colTitle: [{ required: true, message: "请输入字段标题", trigger: "blur" }],
				colName: [{ required: true, message: "请输入字段名", trigger: "blur" }],
				sort: [
					{ required: true, message: "请输入排序字段", trigger: "blur" },
					{ validator: ftVal.validatePInteger, trigger: "blur" },
				],
				propName: [{ required: true, message: "请输入属性名", trigger: "blur" }],
				colType: [{ required: true, message: "请输入数据类型", trigger: "blur" }],
			},
			FieldTypeList: [],
			ViewFormTypeList: [],
			dataTypeList: [],
			dictList: [],
			isRequiredList: [],
			verifyTypeCodeList: [],
		}
	},
	created() {},
	methods: {
		queryEnumList() {
			this.FieldTypeList = []
			enumList("FieldType", "member").then(resp => {
				if (resp.code == 0) {
					this.FieldTypeList = resp.data
				}
			})
			this.ViewFormTypeList = []
			enumList("ViewFormType", "").then(resp => {
				if (resp.code == 0) {
					this.ViewFormTypeList = resp.data
				}
			})
			this.dataTypeList = []
			enumList("ListDataType", "").then(resp => {
				if (resp.code == 0) {
					this.dataTypeList = resp.data
				}
			})
			this.isRequiredList = [
				{ code: "2", name: "否", desc: "否" },
				{ code: "1", name: "是", desc: "是" },
			]
			this.verifyTypeCodeList = []
			enumList("ValidateType", "").then(resp => {
				if (resp.code == 0) {
					this.verifyTypeCodeList = resp.data
				}
			})
			this.dictList = []
			sysDictList().then(resp => {
				if (resp.code == 0) {
					this.dictList = resp.data
				}
			})
		},
		init(id) {
			this.resetForm()
			this.queryEnumList()
			//修改
			if (id) {
				memberextendfieldconfigInfo(id).then(resp => {
					if (resp.code == 0) {
						if (resp.data.dataConfig == null) {
							resp.data.dataConfig = {
								dict: "",
								enumObj: {
									enumName: "",
									moduleName: "",
								},
								urlObj: {
									url: "",
									code: "",
									name: "",
								},
								jsonObj: "",
							}
						} else {
							resp.data.dataConfig = JSON.parse(resp.data.dataConfig)
						}
						this.$nextTick(() => {
							this.form = {
								...this.form,
								...resp.data,
							}
						})
					} else {
						this.$msg({
							message: resp.msg,
							type: "error",
						})
					}
				})
			}
			this.visible = true
		},
		//提交表单数据
		submitForm() {
			this.$refs["form"].validate(valid => {
				if (valid) {
					//修改
					this.form.dataConfig = JSON.stringify(this.form.dataConfig)
					if (this.form.id) {
						memberextendfieldconfigEdit(this.form).then(resp => {
							if (resp.code == 0) {
								this.$message({
									type: "success",
									message: "操作成功!",
								})
								this.$emit("refreshData")
								this.visible = false
							} else {
								this.$msg({
									message: resp.msg,
									type: "error",
								})
							}
						})
						//新增
					} else {
						memberextendfieldconfigSave(this.form).then(resp => {
							if (resp.code == 0) {
								this.$message({
									type: "success",
									message: "操作成功!",
								})
								this.$emit("refreshData")
								this.visible = false
							} else {
								this.$msg({
									message: resp.msg,
									type: "error",
								})
							}
						})
					}
				} else {
					console.log("error submit!!")
					return false
				}
			})
		},
		resetForm() {
			this.form = {
				colTitle: "",
				colName: "",
				propName: "",
				colType: "",
				formType: "",
				dataType: "",
				sort: 1,
				isRequired: "2",
				verifyTypeCode: null,
				verifyTypeName: "",
				dataConfig: {
					dict: "",
					enumObj: {
						enumName: "",
						moduleName: "",
					},
					urlObj: {
						url: "",
						code: "",
						name: "",
					},
					jsonObj: "",
				},
			}
			this.$nextTick(() => {
				if (this.$refs["form"]) {
					this.$refs["form"].resetFields()
				}
			})
		},
		toHump(name) {
			const arr = name.split("_")
			for (var i = 1; i < arr.length; i++) {
				arr[i] = arr[i].charAt(0).toUpperCase() + arr[i].substr(1, arr[i].length - 1)
			}
			return arr.join("")
		},
	},
	watch: {
		"form.colName"(newVal) {
			this.form.propName = this.toHump(newVal)
		},
	},
}
</script>
<style scoped>
.avatar-uploader .el-upload {
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}

.avatar-uploader .el-upload:hover {
	border-color: #409eff;
}

.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 178px;
	height: 178px;
	line-height: 178px;
	text-align: center;
}

.avatar {
	width: 178px;
	height: 178px;
	display: block;
}

.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
	height: auto;
	max-height: 274px;
	padding: 7px;
	overflow: hidden;
	overflow-y: auto;
	font-weight: normal;
}
</style>
